<template>
  <div class="discover-view">
    <!-- 头部 -->
    <van-nav-bar>
      <template #left>
        <div @click="showPopup">
          <van-icon name="wap-nav" size="20" />
        </div>
      </template>
      <template #title>
        <div @click="$router.push({ name: 'search' })">
          <van-field left-icon="search" right-icon="scan" placeholder="请输入数据" />
        </div>
      </template>
      <template #right>
        <van-icon :name="require('../assets/image-20230404151130913.png')" size="20" />
        <van-icon :name="require('../assets/ht.png')" size="20" />
      </template>
    </van-nav-bar>
    <!-- 内容部分 -->
    <!-- banner的内容 -->
    <div class="bannerBox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.imageUrl">
          <van-image :src="banner.imageUrl" radius="20">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 相关导航 -->
    <nav class="nav-icons">
      <van-swipe @change="onChange" :loop="false">
        <van-swipe-item>
          <van-grid :column-num="5" :border="false">
            <van-grid-item v-for="index in 5" :key="index" :icon="icons[index].icon" :text="icons[index].title" />
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :column-num="5" :border="false">
            <van-grid-item v-for="index in 5" :key="index" :icon="icons[index + 5].icon" :text="icons[index + 5].title" />
          </van-grid>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator left" :class="{ activedCurrent: current == 0 }"></div>
          <div class="custom-indicator right" :class="current == 1 ? 'activedCurrent' : ''"></div>
        </template>
      </van-swipe>
    </nav>
    <!-- 对应的歌单列表 -->
    <div class="songListBox">
      <song-list-nav :list="playLists" title="推荐歌单"></song-list-nav>
    </div>
    <!-- 歌曲的相关热点 -->
    <hot-songs :title="toggleArr[0].title" :songs="songs.tracks" @click="toggleSongs"></hot-songs>
    <!-- 欧美歌单 -->
    <div class="songListBox">
      <song-list-nav :list="playLists1" title="欧美推荐"></song-list-nav>
    </div>
  </div>
</template>
<script>
import { getBanner, getPersonalized, getPlayListDetail, getTopPlayList } from '@/api/';
import SongListNav from '@/components/SongListNav';
import HotSongs from '@/components/HotSongs';

export default {
  name: 'discover-view',
  data() {
    return {
      banners: [],
      current: 0,
      icons: [
        {
          icon: require('@/assets/a1.png'),
          title: '每日推荐',
        },
        {
          icon: require('@/assets/a2.png'),
          title: '排行榜',
        },
        {
          icon: require('@/assets/a3.png'),
          title: '私人fm',
        },
        {
          icon: require('@/assets/a4.png'),
          title: '歌单',
        },
        {
          icon: require('@/assets/a5.png'),
          title: '直播',
        },
        {
          icon: require('@/assets/a6.png'),
          title: '游戏',
        },
        {
          icon: require('@/assets/a7.png'),
          title: 'k歌',
        },
        {
          icon: require('@/assets/a8.png'),
          title: '娱乐',
        },
        {
          icon: require('@/assets/a9.png'),
          title: 'lol',
        },
        {
          icon: require('@/assets/a9.png'),
          title: '网易云',
        },
        {
          icon: require('@/assets/a3.png'),
          title: '游戏圈',
        },
      ],
      playLists: [],
      songs: [],
      playLists1: [],
      toggleArr: [
        {
          title: '华语精曲点唱机',
          id: 1001,
        },
        {
          title: '韩语歌曲',
          id: 777372588,
        },
        {
          title: '另类/独立',
          id: 6968985546,
        },
        {
          title: '轻音乐',
          id: 7017030699,
        },
        {
          title: 'ACG电子',
          id: 2645397122,
        },
      ],
    };
  },
  computed: {},
  components: {
    SongListNav,
    HotSongs,
  },
  async created() {
    var { data } = await getBanner();
    this.banners = data.banners;
    var { data } = await getPersonalized(10);
    this.playLists = data.result;
    // 第一次
    this.getSongs();
    var { data } = await getTopPlayList('欧美');
    this.playLists1 = data.playlists;
  },
  mounted() { },
  methods: {
    // 轮播的切换
    onChange(index) {
      this.current = index;
    },
    // 数据重新加载
    async toggleSongs() {
      this.toggleArr.push(this.toggleArr.shift());
      this.getSongs();
    },
    async getSongs() {
      const { data } = await getPlayListDetail(this.toggleArr[0].id);
      this.songs = data.playlist;
    },
    showPopup() {
      this.$bus.$emit('showPopup');
    },
  },
};
</script>
<style scoped>
.discover-view {
  padding-bottom: 50px;
}

.van-cell {
  border: 1px solid rgb(205, 206, 249);
  border-radius: 20px;
  margin: 8px 0px;
  padding: 2px 16px;
}

.bannerBox {
  padding: 10px;
}

.nav-icons {
  padding: 0px;
  /* margin: 10px; */
}

.custom-indicator {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 4px;
  border-radius: 3px;
  background: rgb(245, 230, 232);
}

.left {
  transform: translate(-100%);
}

.activedCurrent {
  background: rgb(232, 78, 80) !important;
}

.van-swipe__indicator--active {
  background: rgb(232, 78, 80);
}

.songListBox {
  padding: 0px 10px;
}
</style>
